spb/clip-spboucher-ai

1import type { Metadata } from "next";2import Link from "next/link";3import { notFound } from "next/navigation";4import { FilmGrid } from "@/components/FilmCard";5import { listFilms, listSeries } from "@/lib/films";6import { dict, href, type Locale } from "@/lib/i18n";78type P = { params: Promise<{ locale: string; slug: string }> };9export async function generateMetadata({ params }: P): Promise<Metadata> {10  const { locale, slug } = await params;11  const s = (await listSeries(locale as Locale)).find((x) => x.slug === slug);12  if (!s) return { title: "Not found", robots: { index: false } };13  return { title: s.title, description: s.description, alternates: { canonical: href(locale as Locale, `/series/${slug}`), languages: { en: `/series/${slug}`, fr: `/fr/series/${slug}` } } };14}1516export default async function SeriesPage({ params }: P) {17  const { locale: l, slug } = await params;18  const locale = l as Locale;19  const t = dict(locale);20  const s = (await listSeries(locale)).find((x) => x.slug === slug);21  if (!s) notFound();22  const { films } = await listFilms(locale, { series: slug, limit: 48 });23  const ordered = [...films].sort((a, b) => (a.episode ?? 0) - (b.episode ?? 0));24  return (25    <div className="py-10">26      <Link href={href(locale, "/series")} className="label hover:text-[var(--color-text)]">← {t.seriesPage.all}</Link>27      <p className="kicker accent-text mt-8" style={{ "--a": s.accent } as React.CSSProperties}>{t.film[s.kind as "fiction" | "factual" | "experimental"]}</p>28      <h1 className="display mt-3 text-[clamp(3rem,8vw,6rem)]">{s.title}</h1>29      <p className="prose-film mt-4 text-lg">{s.description}</p>30      <div className="mt-6 flex gap-3">{films.length > 0 && <Link href={href(locale, `/feed?series=${slug}`)} className="btn btn-primary">{t.film.watchInFeed}</Link>}</div>31      <div className="mt-10">32        {ordered.length ? <FilmGrid films={ordered} locale={locale} notes={Object.fromEntries(ordered.map((f) => [f.id, f.episode ? `${t.film.episode} ${f.episode}` : ""]))} />33          : <p className="card p-8 text-[var(--color-muted)]">{t.seriesPage.none}</p>}34      </div>35    </div>36  );37}38